<template>
  <div class="bigQuestionItem">
    <div class="bigTopInFo">
      <span>{{ item.name }}</span>
      <span>(共</span>
      <span>{{ item.xiao.length }}题，</span>
      <span>合计</span>
      <span>{{ item.fenzhi }}分</span>
      <span>)</span>
    </div>
    <div class="bigBottomInFo">
      <div v-if="item.xiao.length == 0" class="errXiao">当前大题暂无题目</div>
      <div class="bigBottomXiaoItem" v-for="xiao in item.xiao" v-else>
        <a
          href="#"
          @click="()=>{scrollToElement(item.sort+xiao.sort); return false;}"
          >{{ xiao.sort }}</a
        >
      </div>
    </div>
    <div class="line"></div>
  </div>
</template>
<script>
export default {
  props: {
    item: {
      type: Object,
      require: true,
    },
  },
  watch: {
    "item.xiao": {
      handler: function (n, o) {
        // console.log(n,this);
        let amount = 0;
        n.forEach((ele) => {
          amount += Number(ele.fenzhi);
        });
        this.item.fenzhi = amount;
      },
      deep: true,
      immediate: true,
    },
  },

  data() {
    return {};
  },
  methods: {
    scrollToElement(elementId) {
      var element = document.getElementById(elementId);
      if (element) {
        element.scrollIntoView({ behavior: "smooth" }); // 平滑滚动
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.bigQuestionItem {
  width: 100%;
  min-height: 50px;
  padding: 10px 15px;
  // background-color: red;
  .bigTopInFo {
    display: flex;
    align-items: center;
    font-size: 14px;
  }
  .bigBottomInFo {
    padding: 15px 0;
    display: flex;
    flex-wrap: wrap;
    .bigBottomXiaoItem {
      height: 25px;
      width: 25px;
      line-height: 25px;
      text-align: center;
      border: 1px #eee solid;
      margin-right: 10px;
      margin-bottom: 10px;
    }
  }
}

.line {
  height: 1px;
  background-color: #eee;
}
.errXiao {
  font-size: 12px;
  color: rgba($color: #000000, $alpha: 0.5);
}
</style>
